<template>
  <div>
    <!-- 活动名称 -->
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="活动名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <!-- 参团商品 -->
      <el-form-item label="参团商品">
        <!-- 弹出框 -->
        <template>
          <el-button v-model="form.region" @click="open">+请选择商品</el-button>
        </template>
        <div v-show="flag" class="tent">
          <div class="warpper">
            <div class="content">
              <template>
                <el-tabs v-model="activeName" @tab-click="handleClick">
                  <el-tab-pane label="课程" name="first">
                    <!-- 第一个下拉栏 -->
                    <template>
                      <span>课程类型</span>
                      <el-select v-model="value" clearable placeholder="请选择">
                        <el-option
                          v-for="item in obj"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </template>
                    <!-- 第二个下拉栏 -->
                    <template>
                      <span>课程分类</span>
                      <el-cascader
                        v-model="title"
                        :options="list"
                        @change="handleChange"
                        :props="{ expandTrigger: 'hover' }"
                      ></el-cascader>
                    </template>
                    <!-- 课程名称框 -->
                    <template>
                      <span>课程名称</span>
                      <el-input
                        v-model="input"
                        placeholder="请输入内容"
                        class="btn1"
                      ></el-input>
                    </template>
                    <template>
                      <el-button type="primary">搜索</el-button>
                      <el-button type="primary">重置</el-button>
                    </template>
                  </el-tab-pane>
                  <!-- 图书栏 -->
                  <el-tab-pane label="图书" name="second">
                    <template>
                      <span>图书分类</span>
                      <el-cascader
                        v-model="title"
                        :options="list"
                        @change="handleChange"
                        :props="{ expandTrigger: 'hover' }"
                      ></el-cascader>
                    </template>
                    <template>
                      <span>图书名称</span>
                      <el-input
                        v-model="input"
                        placeholder="请输入内容"
                        class="btn1"
                      ></el-input>
                    </template>
                    <template>
                      <el-button type="primary">搜索</el-button>
                      <el-button type="primary">重置</el-button>
                    </template>
                  </el-tab-pane>
                </el-tabs>
              </template>
            </div>
            <div class="title">
              <el-table :data="tableData" style="width: 100%" border>
                <el-table-column prop="spell_name" label="拼团名称">
                </el-table-column>
                <el-table-column prop="name" label="参团商品">
                </el-table-column>
                <el-table-column label="有效期">
                  <template slot-scope="scope">
                    {{ scope.row.end_time | formatDate }}
                  </template>
                </el-table-column>
                <el-table-column prop="status" label="活动状态">
                </el-table-column>
                <el-table-column prop="group_order_num" label="成团订单数？">
                </el-table-column>
                <el-table-column
                  prop="group_order_price"
                  label="成团订单金额？"
                >
                </el-table-column>
                <el-table-column label="操作"> </el-table-column>
              </el-table>
            </div>
            <div>
              <div class="block">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage4"
                  :page-sizes="[10, 20, 30, 40]"
                  :page-size="100"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="0"
                >
                </el-pagination>
              </div>
              <div class="btn">
                <el-button type="primary" icon="el-icon-delete" @click="close"
                  >取消</el-button
                >
                <el-button type="primary" icon="el-icon-search" @click="close"
                  >确定</el-button
                >
              </div>
            </div>
          </div>
        </div>
      </el-form-item>
      <!-- 生效时间 -->
      <el-form-item label="生效时间">
        <el-col :span="11">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="form.date1"
            style="width: 50%;"
          ></el-date-picker>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-time-picker
            placeholder="选择时间"
            v-model="form.date2"
            style="width: 50%;"
          ></el-time-picker>
        </el-col>
      </el-form-item>
      <!-- 失效时间 -->
      <el-form-item label="失效时间">
        <el-col :span="11">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="form.date1"
            style="width:50%;"
          ></el-date-picker>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-time-picker
            placeholder="选择时间"
            v-model="form.date2"
            style="width: 50%;"
          ></el-time-picker>
        </el-col>
      </el-form-item>
      <!-- 参团人数 -->
      <el-form-item label="参团人数">
        <template>
          <el-input-number
            v-model="num"
            controls-position="right"
            @change="handleChange"
            :min="1"
            :max="20"
            class="inp"
          ></el-input-number
          ><span class="inp_sp">拼团人数2-20人</span>
        </template>
      </el-form-item>
      <!-- 拼团有效期 -->
      <el-form-item label="拼团有效期">
        <template>
          <el-input-number
            v-model="time"
            controls-position="right"
            @change="handleChange"
            :min="1"
            :max="72"
            class="inp"
          ></el-input-number
          ><span class="inp_sp">最大支持72小时</span>
        </template>
      </el-form-item>
      <!-- 活动库存 -->
      <el-form-item label="活动库存">
        <template>
          <el-input-number
            v-model="number"
            controls-position="right"
            @change="handleChange"
            :min="1"
            :max="20"
            class="inp"
          ></el-input-number
          ><span class="inp_sp"
            >件
            活动库存单独管理，不与商品库关联，为了不影响买家成团体验，建议活动库存为参团人数的倍数，买家支付成功后，扣除活动库存，如拼团失败，退款后将自动返还库存</span
          >
        </template>
      </el-form-item>
      <!-- 凑团设置 -->
      <el-form-item label="凑团设置">
        <el-checkbox-group v-model="form.type1">
          <el-checkbox label="开启" name="type"
            >开启凑团后，对于为参团的买家，活动商品详情页会显示未完成团的团列表，买家可以直接任选一个参团，提升成团率</el-checkbox
          >
        </el-checkbox-group>
      </el-form-item>
      <!-- 模拟成团 -->
      <el-form-item label="模拟成团">
        <el-checkbox-group v-model="form.type2">
          <el-checkbox label="开启" name="type"
            >开启模拟成团后，拼团有效期内人数未满的团，系统将会以“匿名买家”凑满人数，使该团成团。你只需要对已付款参团的真实买家发货，建议合理开启，以提高成团率</el-checkbox
          >
        </el-checkbox-group>
      </el-form-item>
      <!-- 开团限制 -->
      <el-form-item label="开团限制">
        <el-checkbox-group v-model="form.type3">
          <el-checkbox label="库存小于开团人数限制" name="type"
            >开启后，当剩余库存小于成团人数时，买家在移动端依然可以开团，有可能导致超卖，需要卖家及时补充库存；反之，在移动端提示商品已售罄，有可能导致库存剩余。</el-checkbox
          >
          <el-checkbox label="活动结束剩余时间小于拼团有效时间" name="type"
            >开启后，当活动结束剩余时间小于拼团有效期时，买家在移动端依然可以开团，有可能导致拼团失败。反之，买家不可开团或参团。</el-checkbox
          >
        </el-checkbox-group>
      </el-form-item>
      <!-- 优惠设置 -->
      <el-form-item label="优惠设置">
        <el-checkbox-group v-model="form.type4">
          <el-checkbox label="开启" name="type"
            >开启后，可与优惠劵、优惠码叠加使用</el-checkbox
          >
        </el-checkbox-group>
      </el-form-item>
      <!-- 团长优惠 -->
      <el-form-item label="团长优惠">
        <el-checkbox-group v-model="form.type5">
          <el-checkbox label="开启" name="type"
            >开启团长(开团人)团长将享受更优惠价格，有助于提高开团率和成团率。请注意:模拟成团的团长也能享受团长优惠，请谨慎设置，避免资金损失</el-checkbox
          >
          <el-checkbox label="活动结束剩余时间小于拼团有效时间" name="type"
            >开启后，当活动结束剩余时间小于拼团有效期时，买家在移动端依然可以开团，有可能导致拼团失败。反之，买家不可开团或参团。</el-checkbox
          >
        </el-checkbox-group>
      </el-form-item>
      <el-form-item>
        <el-button>返回</el-button>
        <el-button type="primary" @click="onSubmit">保存并返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type1: [],
        type2: [],
        type3: [],
        type4: [],
        type5: [],
        resource: "",
        desc: ""
      },
      num: 1,
      time: 1,
      number: 1,
      flag: false,
      activeName: "first",
      obj: this.$store.state.options,
      tableData: [],
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      value: "",
      list: this.$store.state.list,
      title: "",
      input: ""
    };
  },
  mounted() {
    console.log(this.list);
  },
  methods: {
    onSubmit() {
      // console.log("submit!");
    },
    handleChange(value) {
      console.log(value);
    },
    //点击弹出模态框
    open() {
      this.flag = true;
    },
    //点击关闭模态框
    close() {
      this.flag = false;
    },

    handleClick() {},

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    handleChange(value) {
      console.log(value);
    }
  }
};
</script>

<style lang="scss" scope>
.inp {
  width: 100px;
}
.inp_sp {
  color: #ccc;
  margin-left: 10px;
}

.tent {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(228, 227, 227, 0.5);
  z-index: 100;
}
.warpper {
  width: 900px;
  background-color: white;
  margin: 120px auto;
}
.content {
  margin: 10px 20px;
}
.btn {
  margin: 20px 20px;
}
.btn1 {
  width: 150px;
}
</style>
